<template>
  <div class="form-box">
    <h1>系统{{ type === 'login' ? '登录' : '注册' }}</h1>
    <el-form ref="formElement" :model="form" :rules="loginRules" label-width="90px">
      <el-form-item label="用户名：" prop="username">
        <el-input v-model="form.username" type="text" maxlength="8" placeholder="请输入5-8位用户名"/>
      </el-form-item>
      <el-form-item label="密码：" prop="password">
        <el-input v-model="form.password" type="password" maxlength="8" show-password placeholder="请输入5-8位密码"/>
      </el-form-item>
      <template v-if="type === 'register'">
        <el-form-item label="电子邮箱：" prop="email">
          <el-input v-model="form.email" type="text" placeholder="请输入电子邮箱"/>
        </el-form-item>
        <el-form-item label="验证码：" prop="code">
          <el-input v-model="form.code" type="text" placeholder="请输入4位验证码"/>
        </el-form-item>
      </template>
    </el-form>
    <div class="footer">
      <el-checkbox v-model="knowMe">记住我</el-checkbox>
      <div class="switch" @click="$emit('changeType')">
        <el-icon>
          <Switch/>
        </el-icon>
        切换{{ type === 'login' ? '注册' : '登录' }}
      </div>
      <el-button type="primary" @click="submit">{{ type === 'login' ? '登录' : '注册' }}</el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import {reactive, ref} from 'vue'
import type RegisterForm from '@/types/RegisterForm'
import {login, register} from '@/api/login'
import {useRouter} from 'vue-router'
import type {Router} from 'vue-router'
import {loginRules} from '@/utils/rules'
import type {FormInstance} from 'element-plus'
import {useMenuStore} from '@/stores/menu'


let menuStore = useMenuStore()

defineEmits<{
  (e: 'changeType'): void
}>()

let props = defineProps<{
  type: 'login' | 'register'
}>()

let router: Router = useRouter()

let form = reactive<RegisterForm>({
  username: 'admin',
  password: '123456',
  email: 'a@qq.com',
  code: '1234'
})

let formElement = ref<FormInstance>()

// 记住密码
let knowMe = ref<boolean>(false)

// 提交
let submit = async () => {
  // 表单组件还未载入内存
  if (!formElement.value) return
  let judge = await formElement.value.validate().catch((err) => {
    console.error('用户信息校验失败')
  })
  // 校验失败
  if (!judge) return

  let res
  if (props.type === 'login') {
    res = await login({username: form.username, password: form.password})
  } else {
    res = await register(form)
  }

  if (res.msg === 'ok') {
    ElMessage.success('登录成功')
    await router.push('/home')
  } else {
    ElMessage.error(res.msg)
  }
}
</script>

<style scoped lang="scss">
.form-box {
  width: 300px;
  padding: 30px 20px;
  border: 1px solid #eaeaea;
  box-shadow: 0 0 70px #e5e5e5;

  h1 {
    font-size: 30px;
    height: 60px;
    text-align: center;
  }

  .footer {
    display: flex;
    align-items: center;
    justify-content: space-between;

    :deep(.el-checkbox__label) {
      display: block;
      line-height: unset;
    }

    .switch {
      display: flex;
      align-items: center;
      cursor: pointer;
      color: #606266;
      font-size: 14px;

      .el-icon {
        margin-right: 2px;
      }
    }
  }
}
</style>